
<template>
  <div id="app">
    <transition :name="direction">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </transition>
  </div>
</template>
<script>
import { forbidScroll } from '@/utils/forbidScroll'
export default {
  name: 'app',
  data () {
    return {
      direction: ''
    }
  },
  mounted () {
    // const _this = this
    window.forbidScroll = forbidScroll
    // window.addEventListener(
    //   'onorientationchange' in window ? 'orientationchange' : 'resize',
    //   function () {
    //     // if (window.orientation === 180 || window.orientation === 0) {
    //     //   alert('竖屏状态！')
    //     // }
    //     if (window.orientation === 90 || window.orientation === -90) {
    //       // alert('横屏状态！')
    //       _this.$Toast('请使用竖屏进行浏览！')
    //     }
    //   },
    //   false
    // )
  },
  watch: {
    $route (to, from) {
      // 如果前端页面进行刷新，则无需加入transition动画
      if (from.name === null) {
        return
      }
      if (to.meta.index < from.meta.index) {
        this.direction = 'slide-right'
      } else {
        if (!to.meta.index) {
          this.direction = ''
          return
        }
        this.direction = 'slide-left'
      }
    }
  }
}
</script>
<style lang="scss">
@import './assets/styles/_mixin.scss';
@import './assets/styles/_response_app.scss';
@import './assets/styles/_reset.scss';
@import './assets/styles/_animation.scss';
.inline-block {
  display: inline-block;
}
.flex-row {
  display: flex;
  flex-flow: row nowrap;
  align-content: center;
}
.mint-header {
  height: 50px;
}
img {
  vertical-align: middle;
}
.error {
  color: #c00;
  font-size: 24px;
}

// custom style for mint ui
.cell-title {
  .mint-cell-title {
    align-self: flex-start;
  }
}
.mint-cell {
  padding: 0 20px;
}
.mint-cell-wrapper {
  padding: 0 !important;
}

</style>
